<select>: Das HTML-Auswahl-Element

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

Das obige Beispiel zeigt eine typische Verwendung von <select>. Es erhält ein id-Attribut, um es für Barrierefreiheitszwecke mit einem <label> zu verknüpfen, sowie ein name-Attribut, um den Namen des zugehörigen Datenpunkts darzustellen, der an den Server übertragen wird. Jede Menüoption wird durch ein <option>-Element definiert, das innerhalb des <select>-Elements verschachtelt ist.

Jedes <option>-Element sollte ein value-Attribut haben, das den Datenwert enthält, der an den Server übertragen wird, wenn diese Option ausgewählt ist. Wenn kein value-Attribut enthalten ist, ist der Standardwert der Text, der innerhalb des Elements enthalten ist. Sie können ein selected-Attribut auf ein <option>-Element setzen, um es standardmäßig ausgewählt zu machen, wenn die Seite zum ersten Mal geladen wird. Wenn kein selected-Attribut angegeben ist, wird das erste <option>-Element automatisch ausgewählt.

Ein <select>-Element wird in JavaScript durch ein HTMLSelectElement-Objekt repräsentiert, das eine value-Eigenschaft hat, welche den Wert der ausgewählten <option> enthält.

Das <select>-Element hat einige einzigartige Attribute, mit denen Sie es steuern können, wie multiple, um anzugeben, ob mehrere Optionen ausgewählt werden können, und size, um anzugeben, wie viele Optionen gleichzeitig angezeigt werden sollen. Es akzeptiert auch die meisten allgemeinen Formulareingabe-Attribute, wie required, disabled, autofocus, usw.

Sie können weiter <option>-Elemente innerhalb von <optgroup>-Elementen verschachteln, um separate Gruppen von Optionen innerhalb des Dropdowns zu erstellen. Sie können auch <hr>-Elemente einfügen, um Trennlinien zu erstellen, die visuelle Unterbrechungen zwischen den Optionen hinzufügen.

Für weitere Beispiele siehe Die nativen Formular-Widgets: Dropdown-Inhalte.

Dieses Element beinhaltet die globalen Attribute.

autocomplete

Ein String, der einen Hinweis für die Autovervollständigungsfunktion eines Benutzeragenten bereitstellt. Siehe Das HTML autocomplete-Attribut für eine vollständige Liste der Werte und Details, wie das Autocomplete verwendet wird.

autofocus

Dieses boolesche Attribut ermöglicht es Ihnen, anzugeben, dass eine Formularsteuerung den Eingabefokus erhalten soll, wenn die Seite geladen wird. Nur ein Formularelement in einem Dokument kann das autofocus-Attribut haben.

disabled

Dieses boolesche Attribut gibt an, dass der Benutzer nicht mit der Steuerung interagieren kann. Wenn dieses Attribut nicht angegeben ist, übernimmt die Steuerung die Einstellung des umgebenden Elements, beispielsweise <fieldset>; wenn es kein umgebendes Element mit dem Attribut disabled gibt, ist die Steuerung aktiviert.

form

Das <form>-Element, das mit dem <select> verknüpft werden soll (sein Formularbesitzer). Der Wert dieses Attributs muss die id eines <form>-Elements im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das <select> mit seinem Vorfahren <form>-Element verknüpft, falls vorhanden.)

Dieses Attribut ermöglicht es Ihnen, <select>-Elemente mit <form>s überall im Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein Vorfahren <form>-Element überschreiben.

multiple

Dieses boolesche Attribut zeigt an, dass mehrere Optionen in der Liste ausgewählt werden können. Wenn es nicht angegeben ist, kann jeweils nur eine Option ausgewählt werden. Wenn multiple angegeben ist, zeigen die meisten Browser ein Roll-Feld anstelle eines einzeiligen Dropdowns.

name

Dieses Attribut wird verwendet, um den Namen der Steuerung festzulegen.

required

Ein boolesches Attribut, das angibt, dass eine Option mit einem nicht-leeren Zeichenfolgenwert ausgewählt werden muss.

size

Wenn die Steuerung als Roll-Feld dargestellt wird (z. B. wenn multiple angegeben ist), stellt dieses Attribut die Anzahl der Zeilen in der Liste dar, die gleichzeitig sichtbar sein sollten. Browser sind nicht verpflichtet, ein Auswahl-Element als Roll-Feld anzuzeigen. Der Standardwert ist 0.

Hinweis: Gemäß der HTML-Spezifikation sollte der Standardwert für die Größe 1 sein; in der Praxis hat sich jedoch gezeigt, dass dies einige Websites beeinträchtigt und kein anderer Browser dies derzeit tut. Daher hat Mozilla entschieden, vorerst 0 zurückzugeben, wenn Firefox verwendet wird.

Auf einem Desktop-Computer gibt es mehrere Möglichkeiten, um in einem <select>-Element mit einem multiple-Attribut mehrere Optionen auszuwählen:

Mausbenutzer können die Strg-, Befehl- oder Shift-Tasten halten (abhängig davon, was für Ihr Betriebssystem sinnvoll ist) und dann auf mehrere Optionen klicken, um sie auszuwählen/abzuwählen.

Tastaturbenutzer können mehrere zusammenhängende Einträge auswählen, indem sie:

• Auf das <select>-Element fokussieren (z. B. mit Tab).
• Einen Eintrag oben oder unten im Bereich auswählen, den sie auswählen möchten, indem sie die Pfeil nach oben und Pfeil nach unten-Tasten verwenden, um nach oben und unten durch die Optionen zu navigieren.
• Die Shift-Taste gedrückt halten und dann die Pfeil nach oben und Pfeil nach unten-Tasten verwenden, um den Bereich der ausgewählten Einträge zu vergrößern oder zu verkleinern.

Tastaturbenutzer können mehrere nicht zusammenhängende Einträge auswählen, indem sie:

• Auf das <select>-Element fokussieren (z. B. mit Tab).
• Die Strg-Taste gedrückt halten und dann die Pfeil nach oben und Pfeil nach unten-Tasten verwenden, um die "fokussierte" Auswahloption zu ändern, d.h. die Option, die ausgewählt wird, wenn Sie dies tun möchten. Die "fokussierte" Auswahloption wird mit einer gepunkteten Umrandung hervorgehoben, ähnlich wie ein über die Tastatur fokussierter Link.
• Die Leertaste drücken, um "fokussierte" Auswahloptionen auszuwählen/abzuwählen.

Das <select>-Element war historisch gesehen berüchtigt schwer produktiv mit CSS zu gestalten, daher wurden Funktionen eingeführt, um die Erstellung von vollständig anpassbaren Auswahl-Elementen zu ermöglichen.

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder Legacy-Codebasen, in denen sie nicht verwendet werden können), sind Sie darauf beschränkt, das Boxmodell, die angezeigte Schriftart, usw. zu manipulieren. Sie können auch die appearance-Eigenschaft verwenden, um das Standard-Systemaussehen zu entfernen.

Es ist jedoch schwierig, mit traditionellen <select>-Elementen ein konsistentes Ergebnis in allen Browsern zu erzielen. Wenn Sie die volle Kontrolle haben möchten, sollten Sie in Erwägung ziehen, eine Bibliothek mit guten Möglichkeiten zur Gestaltung von Formular-Widgets zu verwenden, oder versuchen, Ihr eigenes Dropdown-Menü mit nicht-semantischen Elementen, JavaScript und WAI-ARIA zu erstellen, um Semantik bereitzustellen.

Sie können die :open-Pseudo-Klasse verwenden, um <select>-Elemente im offenen Zustand zu stylen, also wenn die Dropdown-Optionsliste angezeigt wird. Dies gilt nicht für mehrzeilige <select>-Elemente (die mit dem multiple-Attribut versehen sind) — sie tendieren dazu, als Roll-Feld statt als Dropdown angezeigt zu werden, und haben daher keinen offenen Zustand.

Für mehr Informationen zum alten <select>-Styling siehe:

• HTML-Formulare stylen
• Fortgeschrittenes Styling für HTML-Formulare
• Die field-sizing-Eigenschaft, die steuert, wie <select>-Elemente im Verhältnis zu ihren enthaltenen Optionen dimensioniert werden.

Das <hr> innerhalb eines <select> sollte als rein dekorativ betrachtet werden, da es derzeit nicht innerhalb des Zugangsbaumes verfügbar ist und daher nicht für unterstützende Technologien verfügbar ist.

Das folgende Beispiel erstellt ein Dropdown-Menü mit drei Werten, wobei die zweite Option standardmäßig ausgewählt ist.

<!-- The second value will be selected initially -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

Ergebnis

Das folgende Beispiel erstellt ein Dropdown-Menü mit Gruppierung mithilfe von <optgroup> und <hr>, um es dem Benutzer zu erleichtern, den Inhalt im Dropdown zu verstehen.

<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <optgroup label="Fruit">
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="cherry">Cherries</option>
    <option value="damson">Damsons</option>
  </optgroup>
  <hr />
  <optgroup label="Vegetables">
    <option value="artichoke">Artichokes</option>
    <option value="broccoli">Broccoli</option>
    <option value="cabbage">Cabbages</option>
  </optgroup>
  <hr />
  <optgroup label="Meat">
    <option value="beef">Beef</option>
    <option value="chicken">Chicken</option>
    <option value="pork">Pork</option>
  </optgroup>
  <hr />
  <optgroup label="Fish">
    <option value="cod">Cod</option>
    <option value="haddock">Haddock</option>
    <option value="salmon">Salmon</option>
    <option value="turbot">Turbot</option>
  </optgroup>
</select>

Ergebnis

Das folgende Beispiel ist komplexer und zeigt mehr Funktionen, die Sie auf einem <select>-Element verwenden können:

<label>
  Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

Ergebnis

Sie werden sehen, dass:

• Mehrere Optionen auswählbar sind, da wir das multiple-Attribut eingeschlossen haben.
• Das size-Attribut bewirkt, dass nur 4 Zeilen gleichzeitig angezeigt werden; Sie können scrollen, um alle Optionen anzusehen.
• Wir haben <optgroup>-Elemente eingeschlossen, um die Optionen in verschiedene Gruppen zu unterteilen. Dies ist eine rein visuelle Gruppierung, deren Visualisierung im Allgemeinen darin besteht, dass der Gruppenname fett angezeigt wird und die Optionen eingerückt sind.
• Die "Hamster"-Option enthält ein disabled-Attribut und kann daher überhaupt nicht ausgewählt werden.

• Ereignisse, die von <select> ausgelöst werden: change, input
• Das <option>-Element
• Das <optgroup>-Element
• Anpassbare Auswahl-Elemente